<template>
  <div class="list-page">
    <Row>
      <div class="toolbar">
        <div>
          <Button type="primary" icon="md-grid" @click="bloc.downLoad()" v-if="Validation.check(Resources.MEMBER_EXCEL)"
            >导出
          </Button>
        </div>
        <div>
          <router-link :to="{ path: '/personinfo' }">
            <Button
              type="primary"
              icon="md-add"
              v-if="Validation.check(Resources.MEMBER_ADD)"
              >新增会员
            </Button>
          </router-link>
        </div>
        <CompanySelector
          style="width: 200px; margin-right: 10px"
          :tagCount="100"
          :companyId="bloc.form.companyId"
          @on-change="value => (bloc.form.companyId = value)"
          v-if="Validation.isRootCompany && tepee === '1'"
        ></CompanySelector>
        <Input
          placeholder="昵称"
          v-model="bloc.form.nickname"
          style="width: 180px; margin-right: 10px"
        />
        <Input
          placeholder="手机"
          v-model="bloc.form.phone"
          style="width: 180px; margin-right: 10px"
        />
        <Select
          v-model="bloc.form.sex"
          style="width: 200px; margin-right: 10px"
          placeholder="性别"
          clearable
        >
          <Option
            v-for="item in bloc.form.sexList"
            :value="item.value"
            :key="item.value"
            >{{ item.label }}</Option
          >
        </Select>
        <Select
          v-model="bloc.form.modelName"
          style="width: 200px; margin-right: 10px"
          placeholder="注册机型"
          @on-change="changeValue"
          clearable
        >
          <Option
            v-for="item in modelList"
            :value="item.label"
            :key="item.value"
            >{{ item.label }}</Option
          >
        </Select>
        <Select
          v-model="bloc.form.province"
          style="width: 200px; margin-right: 10px"
          placeholder="省份"
          @on-change="changeValue"
          clearable
        >
          <Option
            v-for="item in CityList"
            :value="item.label"
            :key="item.value"
            >{{ item.label }}</Option
          >
        </Select>
        <Select
          v-model="bloc.form.city"
          style="width: 200px; margin-right: 10px"
          placeholder="城市"
          clearable
        >
          <Option
            v-for="item in CityListCope"
            :value="item.label"
            :key="item.value"
            >{{ item.label }}</Option
          >
        </Select>
        <DatePicker
          type="daterange"
          placeholder="注册时间"
          format="yyyy/MM/dd"
          v-model="bloc.form.date"
          :editable="false"
          style="width: 200px; margin-right: 10px"
        ></DatePicker>
        <Select
          v-model="bloc.form.birthdayDate"
          style="width: 200px; margin-right: 10px"
          placeholder="生日月份"
          clearable
        >
          <Option
            v-for="item in bloc.form.monthList"
            :value="item.value"
            :key="item.value"
            >{{ item.value }}</Option
          >
        </Select>
        <!-- <Select
          v-model="bloc.form.sortProperties"
          style="width: 200px; margin-right: 10px"
          placeholder="排序"
          clearable
        >
            <Option v-for="item in bloc.form.sortPropertiesList" :value="item.value" :key="item.value">{{ item.label }}</Option>
        </Select> -->
        <Select
          v-model="bloc.form.sortDirection"
          style="width: 200px; margin-right: 10px"
          placeholder="升降序"
        >
          <Option
            v-for="item in bloc.form.sortList"
            :value="item.value"
            :key="item.value"
            >{{ item.label }}</Option
          >
        </Select>

        <Button
          type="primary"
          icon="ios-search"
          style="margin-right: 10px"
          size="default"
          @click="bloc.load(1, bloc.paged.pageSize)"
          >查询
        </Button>
        <Button
          icon="md-refresh"
          style="margin-right: 10px"
          size="default"
          @click="bloc.reset()"
          >重置</Button
        >
      </div>
    </Row>
    <Button
      type="primary"
      icon="md-exit"
      style="margin-bottom: 10px"
      size="default"
      @click="newsPush"
      v-if="Validation.check(Resources.MEMBER_MESSAGE)"
      >消息推送
    </Button>
    <Button
      type="primary"
      icon="md-exit"
      style="margin-bottom: 10px; margin-left: 20px"
      size="default"
      @click="wishes"
      v-if="Validation.check(Resources.MEMBER_ADD_SCREEN_PAGE)"
      >新增开屏页
    </Button>
    <Button
      type="primary"
      icon="md-exit"
      style="margin-bottom: 10px; margin-left: 20px"
      size="default"
      @click="createquestion"
      v-if="Validation.check(Resources.MEMBER_ADD_QUESTION)"
      >新增问卷
    </Button>

    <Table
      border
      :loading="bloc.loading"
      :columns="columns"
      highlight-row
      :data="bloc.paged.items"
      @on-selection-change="selection => (bloc.memberSelectArr = selection)"
    >
      <template slot-scope="{ row }" slot="action">
        <div style="white-space: nowrap">
          <Button
            size="small"
            style="margin-left: 10px;"
            @click="modifyItem(row)"
            type="info"
            v-if="Validation.check(Resources.MEMBER_UPDATE)"
          >
            详情
          </Button>
          <Button
            size="small"
            style="margin-left: 10px;"
            @click="removeItem(row)"
            type="warning"
            v-if="Validation.check(Resources.MEMBER_DELETE)"
          >
            删除
          </Button>
        </div>
      </template>
      <slot name="footer" slot="footer">
        <Page
          show-elevator
          show-total
          show-sizer
          :total="bloc.paged.itemCount"
          :current="bloc.paged.pageIndex"
          :page-size="bloc.paged.pageSize"
          :page-size-opts="[15, 30, 50, 100]"
          @on-change="val => bloc.load(val, bloc.paged.pageSize)"
          @on-page-size-change="val => bloc.load(bloc.paged.pageIndex, val)"
        />
      </slot>
    </Table>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import { getDeviceMaintainList } from "@/base/api/DeviceMaintainApi";
import { Route } from "vue-router";
import { ListBloc } from "@/view/member/bloc/ListBloc";
import { Member } from "@/base/model/Member";
import { formatDate } from "@/base/util/Dates";
import CompanySelector from "@/component/CompanySelector.vue";
import { Validation } from "@/base/Validation";
import { Resources } from "@/base/Resources";
import { isEmpty } from "@/base/util/Strings";
import { store } from "@/store/Store";
import { getProvince, getCity } from "@/base/api/DataScreen";

const columns = (bloc: ListBloc) => [
  {
    type: "selection",
    width: 40,
    align: "left"
  },
  // {
  //   title: '所属品牌商',
  //   key: 'companyId',
  //   render: (h: any, params: any) => {
  //     return h('span', {
  //       domProps: {
  //         innerText: bloc.getCompanyName(params.row.companyId)
  //       }
  //     });
  //   },
  //   align: 'left',
  //   minWidth: 220,
  //   tooltip: true
  // },
  {
    title: "昵称",
    key: "nickname",
    align: "left",
    minWidth: 120,
    tooltip: true
  },
  {
    title: "积分",
    key: "point",
    align: "left",
    minWidth: 120,
    tooltip: true
  },
  {
    title: "手机",
    key: "phone",
    align: "left",
    minWidth: 120,
    tooltip: true
  },
  {
    title: "性别",
    key: "sex",
    align: "left",
    minWidth: 100,
    tooltip: true,
    render: (h: any, params: any) => {
      return h("span", {
        domProps: {
          innerText:
            params.row.sex == undefined ? "" : params.row.sex == 0 ? "男" : "女"
        }
      });
    }
  },
  {
    title: "标签",
    key: "label",
    align: "left",
    minWidth: 120,
    tooltip: true
    // render: (h: any, params: any) => {
    //   return h('span', {
    //     domProps: {
    //       innerText: '兴趣：'+params.row.career+'\n'+'爱好:'+params.row.hobby
    //     }
    //   });
    // }
  },
  // {
  //   title: "生日",
  //   key: "birthday",
  //   align: "left",
  //   minWidth: 120,
  //   tooltip: true,
  //   // render: (h: any, params: any) => {
  //   //   return h('span', {
  //   //     domProps: {
  //   //       innerText: formatDate(
  //   //         new Date(params.row.birthday),
  //   //         'yyyy-MM-dd hh:mm:ss'
  //   //       )
  //   //     }
  //   //   });
  //   // },
  // },
  // {
  //   title: "身高(cm)",
  //   key: "height",
  //   align: "left",
  //   minWidth: 120,
  //   tooltip: true,
  // },
  // {
  //   title: "体重(Kg)",
  //   key: "weight",
  //   align: "left",
  //   minWidth: 120,
  //   tooltip: true,
  // },
  // {
  //   title: "省份",
  //   key: "province",
  //   align: "left",
  //   minWidth: 120,
  //   tooltip: true,
  // },
  {
    title: "城市",
    key: "city",
    align: "left",
    minWidth: 120,
    tooltip: true
  },
  // {
  //   title: "登录IP",
  //   key: "loginIp",
  //   align: "left",
  //   minWidth: 100,
  //   tooltip: true,
  // },
  {
    title: "注册机型",
    // key: 'clientModel',
    key: "modelName",
    align: "left",
    minWidth: 100,
    tooltip: true
  },
  {
    title: "设备序列号",
    key: "deviceSn",
    align: "left",
    minWidth: 130,
    tooltip: true
  },
  {
    title: "注册时间",
    width: 160,
    key: "registerDate",
    align: "left",
    tooltip: true,
    render: (h: any, params: any) => {
      return h("span", {
        domProps: {
          innerText: formatDate(
            new Date(params.row.registerDate),
            "yyyy-MM-dd hh:mm:ss"
          )
        }
      });
    }
  },
  {
    title: "所属经销商",
    key: "agentName",
    align: "left",
    width: 200,
    tooltip: true,
    render: (h: any, params: any) => {
      return h("span", {
        domProps: {
          innerText:
            params.row.agentId > 1
              ? "ID:" + params.row.agentId + "\n" + params.row.agentName
              : ""
        }
      });
    }
  },
  // {
  //   title: '修改时间',
  //   render: (h: any, params: any) => {
  //     return h('span', {
  //       domProps: {
  //         innerText: formatDate(
  //           new Date(params.row.updated),
  //           'yyyy-MM-dd hh:mm:ss'
  //         )
  //       }
  //     });
  //   },
  //   width: 160,
  //   align: 'left',
  //   tooltip: true
  // },
  {
    title: "操作",
    slot: "action",
    width: 47 * 2 + 50,
    fixed: "right"
  }
];

@Component({
  components: {
    CompanySelector
  }
})
export default class extends Vue {
  [x: string]: any;
  modelList:any = []
  beforeRouteEnter(to: Route, from: Route, next: (vm: any) => void) {
    next(vm => {
      vm.bloc.load(vm.bloc.paged.pageIndex, vm.bloc.paged.pageSize).catch(e => {
        vm.$Message.error("操作错误");
      });
      vm.bloc.getAgentList(
        vm.bloc.angent.pageIndex,
        vm.bloc.angent.pageSize,
        "ASC"
      );
      vm.tepee;
    });
  }

  bloc: ListBloc = new ListBloc();
  columns = columns(this.bloc);
  Validation = Validation;
  Resources = Resources;
  CityList: any = [];
  CityListCope: any = [];
  get tepee() {
    if (store.state.user.tepee == "2") {
      //隐藏经销商栏目
      this.columns = this.columns.filter(column => column.key !== "agentName");
    }
    return store.state.user.tepee;
  }
  mounted() {
    // 获取按摩椅全部型号
    getDeviceMaintainList({
      pageIndex: 1,
      pageSize: 1000,
      sortId: 1324949759328288,
      sortDirection: "DESC"
    }).then(res => {
      // console.log(res);
      res.data.items.forEach(item => {
        let obj = {
          value:0,
          label:'',
        };
        obj.value = item.id;
        obj.label = item.modelName;
        this.modelList.push(obj);
      });
      let objAll = {
        value: 0,
        label: "全部机型"
      };
      //全部型号
      this.modelList.push(objAll);
    });
    // 
    getProvince("").then(res => {
      res.data.forEach(item => {
        var obj = {
          value: 0,
          label: ""
        };
        obj.value = item.id;
        obj.label = item.name;
        this.CityList.push(obj);
      });
    });
    getCity("", "").then(res => {
      //  console.log(res.data)
      res.data.forEach(item => {
        var obj = {
          value: 0,
          label: ""
        };
        obj.value = item.id;
        obj.label = item.name;
        this.CityListCope.push(obj);
      });
    });
  }
  changeValue(data) {
    this.CityListCope = [];
    var CityList = this.CityList.filter(item => {
      return item.label == data;
    });
    getCity("", CityList[0].value).then(res => {
      //  console.log(res.data)
      res.data.forEach(item => {
        var obj = {
          value: 0,
          label: ""
        };
        obj.value = item.id;
        obj.label = item.name;
        this.CityListCope.push(obj);
      });
    });
  }
  removeItem(dataItem: Member) {
    this.$Modal.confirm({
      title: "提示",
      content: "确认删除后将无法恢复！还要继续吗？",
      okText: "删除",
      cancelText: "取消",
      onOk: () => {
        this.bloc
          .removeItem(dataItem)
          .then(value => {
            this.bloc.load(this.bloc.paged.pageIndex, this.bloc.paged.pageSize);
          })
          .then(() => {
            this.$Message.success("删除成功");
          })
          .catch(e => {
            this.$Message.error("删除失败");
          });
      }
    });
  }

  modifyItem(row) {
    // this.$router.replace(`/info/${dataItem.id}`);
    this.$router.push({ path: `/personinfo/${row.id}`, query: {phone:row.phone } });
  }
  //积分明细
  // integral(row: any) {
  //   this.$router.push({
  //     path: `/member/Point/${row.id}`,
  //     query: {
  //       phone: row.phone
  //     }
  //   });
  // }

  wishes() {
    console.log(this.bloc.memberSelectArr);
    if (isEmpty(this.bloc.memberSelectArr)) {
      this.$Message.error("请选择至少一个会员");
      return false;
    }
    for (let i = 0; i < this.bloc.memberSelectArr.length; i++) {
      let companyId = this.bloc.memberSelectArr[0].companyId;
      let agentId = this.bloc.memberSelectArr[0].agentId;
      if (this.bloc.memberSelectArr[i].companyId !== companyId) {
        this.$Message.error("请选择相同品牌商的会员");
        return false;
      }
      // if (this.bloc.memberSelectArr[i].agentId !== agentId) {
      //     this.$Message.error('请选择相同品牌商相同经销商的会员');
      //     return false;
      // }
    }
    sessionStorage.setItem(
      "MEMBER_INFO",
      JSON.stringify(this.bloc.memberSelectArr)
    );
    this.$router.replace("/banners/wishes/add");
  }
  createquestion() {
    if (isEmpty(this.bloc.memberSelectArr)) {
      this.$Message.error("请选择至少一个会员");
      return false;
    }
    for (let i = 0; i < this.bloc.memberSelectArr.length; i++) {
      let companyId = this.bloc.memberSelectArr[0].companyId;
      let agentId = this.bloc.memberSelectArr[0].agentId;
      if (this.bloc.memberSelectArr[i].companyId !== companyId) {
        this.$Message.error("请选择相同品牌商的会员");
        return false;
      }
      if (this.bloc.memberSelectArr[i].agentId !== agentId) {
        this.$Message.error("请选择相同品牌商相同经销商的会员");
        return false;
      }
    }
    console.log(this.bloc.memberSelectArr);
    this.$router.push({
      path: "/questionnaire/create",
      query: {
        userIdArr: JSON.stringify(this.bloc.memberSelectArr),
        status: "true"
      }
    });
  }
  newsPush() {
    if (isEmpty(this.bloc.memberSelectArr)) {
      this.$Message.error("请选择至少一个会员");
      return false;
    }
    sessionStorage.setItem(
      "MEMBER_INFO",
      JSON.stringify(this.bloc.memberSelectArr)
    );
    this.$router.replace("/news/add");
  }

  onSelectChange(selection) {
    this.bloc.memberSelectArr = selection;
  }
}
</script>

<style lang="less"></style>
